<template>
  <div class="modal-content" :style="'z-index:'+(level*2+2)">
    <div class="modal-block" :style="'width:'+width+';height:'+height+';z-index:'+(level*2+3)">
      <div class="modal-header">
        <div class="modal-title">
          <div class="line"></div>
          {{title}}{{name}}</div>
        <div @click="close" class="iconfont close icon-guanbi"></div>
      </div>
      <div class="modal">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Modal",
  props:{
    width:{
      type:String,
      default:'700px'
    },
    height:{
      type:String,
      default:'700px'
    },
    title:{
      type:String,
      default:''
    },
    level:{
      type:Number,
      default:1
    },
    name:{
      type:String,
      default:''
    },
  },
  emits:['closeModal'],
  methods:{
    close(){
      this.$emit('closeModal')
    }
  }
}
</script>

<style scoped lang="scss">
.modal-content{
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.7);
  top: 0;
  left: 0;
  z-index: 2;
  .modal-block{
    z-index: 3;
    position: fixed;
    transform: translate(-50%,-50%);
    top: 54%;
    left: 50%;
    overflow:hidden;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid #07a6ff;
    background: rgba(4,20,59,.7);
    .modal-header{
      width: 100%;
      height: 35px;
      position: relative;
      background: url("/static/images/statistical-title.png") no-repeat center left;
      .modal-title{
        color: #fff;
        position: absolute;
        font-size: 17px;
        top: -5px;
        left: 5px;
        display: flex;
        align-items: center;
        .line{
          width: 5px;
          height: 16px;
          background: #31A7FF;
          border-radius: 10px;
          margin-right: 6px;
        }
      }
      .close{
        color: #07a6ff;
        font-size: 20px;
        position: absolute;
        right: 0;
        cursor: pointer;
      }
    }
    .modal{
      width: 100%;
      height: calc(100% - 35px);
      overflow-y: auto;
    }
    .modal::-webkit-scrollbar-track {
      background-color: #041a41
    }

    .modal::-webkit-scrollbar {
      width: 7px;
      background-color: #041a41
    }

    .modal::-webkit-scrollbar-thumb {
      background-color: #022c5c;
      border-radius: 20px;
    }
  }
}
</style>
